<template>
  <div>
    <MainNavBar>
      <template #center-name> 比赛成绩 </template>
    </MainNavBar>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div class="content_C">
        <div class="content" v-for="(item,index) in scoreList" :key="index" @click="handleClick(item)">
          <!-- <div class="match"> -->
          <div class="match" >
            <div class="match_content">
              <!-- 顶部颜色条 -->
              <div
                class="match_content_top"
                v-if="item.compet_id == 1"
              ></div>
              <div class="match_content_top match_content_top_a" v-else></div>
              <!-- 比赛进程 -->
              <div class="match_name">
                <div class="match_name_first">{{item.name}}</div>
                <div class="color_li">
                  <div class="collor_one"></div>
                  <div class="collor_one collor_one_a" v-if="item.status >= 1"></div>
                  <div v-if="item.status == 2" class="collor_one collor_one_c"></div>
                  <div v-else-if="item.status == 3" class="collor_one collor_one_b"></div>
                </div>
              </div>
              <!-- 选手信息 -->
              <div class="people">
                <div class="people_name">
                  <div><img src="http://qnticao.laigl.com/vue/people.png" alt="" /></div>
                  <div>{{item.sign_name}}</div>
                </div>
                <div class="people_name pelple_center">
                  <div><img src="http://qnticao.laigl.com/vue/level.png" alt="" /></div>
                  <div v-if="item.compet_id==1">{{item.level?getsexlevel(item):''}}</div>
                  <!-- <div v-if="item.sign.compet_id==1">{{getsexlevel(item)}}</div> -->
                  <div v-else>{{item.level!=null?getlevel(item.level):''}}</div>
                </div>
                <div class="people_right">
                  <!-- <div><img src="http://qnticao.laigl.com/vue/level.png" alt=""></div> -->
                  <div class="color_d" v-if="item.status == 0">未上传视频 </div>
                  <div class="color_d" v-else-if="item.status == 1">已上传视频，待审核</div>
                  <div class="color_d"  v-else-if="item.status == 2">已上传视频，审核通过</div>
                  <div class="color_d"  v-else-if="item.status == 3">已上传视频，审核不通过</div>
                  <div class="color_c"  v-else-if="item.status == 4">视频未上传完</div>
                  <div class="color_c"  v-else-if="item.status == 5">未上传完成视频，审核已开始</div>
                </div>
              </div>
              <!-- 报名时间 -->
              <div class="time">报名时间：{{getTime(item.create_time*1000)}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { request } from "../../network/request";
import { Toast } from "vant";
export default {
  data() {
    return {
      isLoading: false,
      flag: false,
      id_card: "",
      scoreList: [],
      num:0
    };
  },
  mounted() {
    
    this.getScoreList();
  },
  methods: {
    handleClick(item){
      let message = "";
      switch (Number(item.status)) {
        case 0:
          message = "请联系报名人上传视频"
          break;
        case 1:
          message = "裁判评审中"
          break;
        case 2:
          item.compet_id==1 ? message = "请联系报名人下载证书": message = "请联系报名人填写邮寄信息"
          break;
        case 3:
          message = "重新请联系报名人再次上传视频"
          break;
        case 4:
          message = "请联系报名人上传完整视频"
          break;
        case 5:
          message = "本阶段审核已开始"
          break;
      
      }
      Toast(message)
    },
    getsexlevel(item){
      if (Number(item.level)<3) {
          return item.level+'级'
      }
      else{
        if( item.sex == 0){
          return '男'+item.level+'级'
        }else{
          return '女' + item.level + '级'
        }
      }
    },
     getlevel(level){
      switch (level) {
        case 1:
          return '初级'
        case 2:
          return '中级'
        case 3:
          return '高级'    
        default:
          break;
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.getScoreList()
        this.isLoading = false;
      }, 1000);
    },
    async getScoreList() {
      Toast.clear()
      try {
        const res = await request({
          url: "/v1/ucenter/checkResults",
          data: {
            id_card: this.$route.params.idcard,
          },
        });
        if (res.code == 2000) {
          this.scoreList = res.data;
          return
          this.scoreList.forEach((item)=>{
           if(item.sign.is_pass != 0) {
             this.num = this.num+1
           }
          })
          if(this.num==0){
            Toast({
              message:"比赛成绩暂未公布",
              type:"fail",
            })
          }
        } else {
          Toast(res.msg);
        }
      } catch (error) {}
    },
    getTime (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s;
      }
  },
  components: {
    MainNavBar,
  },
};
</script> 

<style  scoped>
.content_C{
    height: auto;
    min-height: calc(100vh - 13.333vw);
    padding-bottom: 5.333vw;
}
.content {
  margin-top: 8vw;
}
.match {
  width: 87.333vw;
  margin: 0 auto;
  height: 32vw;
  background-color: #fff;
  border-radius: 3.2vw;
}
.match_content {
  width: 79.733vw;
  margin: 0 auto;
  padding-top: 5.333vw;
  padding-bottom: 4.267vw;
}
.match_content_top {
  width: 5.333vw;
  height: 0.533vw;
  margin-bottom: 2.667vw;
  background-color: rgba(0, 84, 166, 1);
}
.match_content_top_a {
  background-color: #a0f9c0;
}
.match_name {
  display: flex;
  align-items: center;
  height: 9.333vw;
  color: rgba(10, 36, 99, 1);
  font-size: 4.267vw;
  font-family: PingFangSC-Semibold;
  line-height: 5.867vw;
  font-weight: 600;
}
.match_name_first{
    overflow: hidden;
    height: 9.333vw;
    line-height: 9.333vw;
    width: 48vw;
}
.collor_one {
  width: 9.6vw;
  height: 2.667vw;
  flex: 1;
  position: relative;
  background-color: rgb(252, 235, 0);
  transform: skew(-35deg);
  margin-right: 0.533vw;
}
.collor_one_a {
  background-color: #0054a6;
}
.collor_one_b {
  background-color: #46005b;
}
.collor_one_c {
  background-color: #019641;
}
.color_li {
  margin-left: 2.4vw;
  display: flex;
  justify-content: flex-start;
}
.people {
  height: 6.4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 3.2vw;
  margin-top: 0.8vw;
  margin-bottom: 1.667vw;
}
.people_name {
  display: flex;
  width: 100px;
  height: 6.4vw;
  align-items: center;
  justify-content: center;
}
.pelple_center {
  margin-left: 4vw;
}
.people_name img {
  width: 4.267vw;
  height: 4.267vw;
  margin-right: 1.6vw;
  /* margin-left: 1.6vw; */
}
.people_right {
  margin-left: 2.667vw;
  text-align: right;
}
.people_right div {
  width: 34.333vw;
  height: 6.4vw;
  line-height: 6.333vw;
}
.color_c {
  color: rgba(70, 0, 91, 1);
}
.color_d {
  color: rgba(1, 150, 65, 1);
}
.time {
  color: rgba(206, 211, 224, 1);
  font-size: 3.2vw;
}
</style>